<template>
  <div class="wrap">
    <van-tabs v-model="active" @change="tabClick">
      <van-tab :title="title" :name="-1"></van-tab>
      <van-tab
        v-for="(item, index) in menu"
        :key="index"
        :title="item.label"
        :name="item.id"
      ></van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  name: "menu-list",
  props: {
    menu: Array,
    title: String,
  },
  data() {
    return {
      active: "",
    };
  },
  methods: {
    tabClick() {
      this.$emit("input", this.active);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/global-style.scss";

.wrap {
  background: $background-color;
  display: flex;
  align-items: center;
  padding: 0 10px 0 0;
  overflow: hidden;
}
.van-tabs {
  width: 100%;
}
::v-deep .van-tabs__nav {
  background: $background-color;
}
</style>
